/**违禁词新增/编辑 */
<template>
  <div class="word-add-page">

    <div class="word-add-bottom-box">
      <el-card shadow="always">
        <div slot="header">
          <line-header :title="title"></line-header>
        </div>
        <div class="card-body">
          <el-form ref="form" :model="form" label-width="200px">
            <el-form-item v-if="isNewWord" label="上传文件：">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-change="onChange"
                :multiple="false"
                :limit="1"
                list-type="text"
                :auto-upload="false"
                accept="*.dic"
                :on-exceed="handleExceed"
                :file-list="fileList">
                <el-button size="small" type="primary">选择词库</el-button>
                <div slot="tip" class="el-upload__tip">只能上传.dic文件，且不超过2M</div>
              </el-upload>
            </el-form-item>

            <el-form-item v-else label="违禁词库：">
              <div>{{word.name}}</div>
            </el-form-item>
            <el-form-item label="所覆盖类目：">
              <el-checkbox-group v-model="form.kinds">
                <el-checkbox  name="type" :label="1">服务推广</el-checkbox>
                <el-checkbox name="type" :label="2" >企业推广</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>

          <div class="bottom-btn-box" style="display: flex;justify-content: center;">

            <template v-if="isNewWord">
              <el-button type="primary" plain @click="hkAdd">添加</el-button>
            </template>

            <template v-else>
              <el-button type="primary" plain @click="hkSave">保存</el-button>
            </template>

            <el-button type="primary" plain @click="hkCancel">{{
              isNewWord ? "取消" : "返回"
              }}
            </el-button>
          </div>

        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import LineHeader from "@/components/line-header/index";
  import {invoiceStatusList, invoiceClass} from "@/utils/tools";
  import {trace} from "../../utils/trace"
  import {mapGetters} from "vuex"
  import {hkGetTimeFmt, hkShowErrorText, hkShowSuccessText} from "../../utils/tools"

  export default {
    components: {LineHeader},
    props: {},
    data() {
      return {
        title: "新增违禁词",   //编辑违禁词
        isNewWord: true,      //是否为新增违禁词
        word:{},
        form: {
          kinds: [],
          file: null,
        },
        fileList: [],

      };
    },
    filters: {},
    watch: {},
    computed: {
      ...mapGetters(["words"])
    },
    methods: {
      hkCancel() {   //取消 返回
        this.$router.back();
      },
      hkAdd() {       //添加
        trace(this.form.kinds)
        if (this.fileList.length == 0 || this.form.kinds.length == 0) {
          hkShowErrorText("请先选择文件和设置服务类目");
          return;
        }
        let param = new FormData(); //创建form对象
        param.append("words", this.fileList[0].raw);
        param.append("kinds", JSON.stringify(this.form.kinds));
        this.$store.dispatch('promote/words', param).then((data) => {
          trace("words-新增违禁词-data", data);
          hkShowSuccessText("新增违禁词成功");
          this.$router.back();
        })
      },
      hkSave() {   //保存
        if (this.form.kinds.length == 0) {
          hkShowErrorText("请先设置服务类目");
          return;
        }
        let id = this.id;
        let kinds = JSON.stringify(this.form.kinds)
        this.$store.dispatch('promote/wordsKind', {id, kinds}).then((data) => {
          trace("wordsQuery-编辑违禁词 更改使用范围-data", data);

          hkShowSuccessText("编辑违禁词-更改使用范围成功！");
          this.$router.back();
        })
      },
      handleRemove(file, fileList) {
        trace(file, fileList);
      },
      handlePreview(file) {
        trace(file);
      },
      handleExceed(files, fileList) {
        trace(files, fileList)
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {

        return this.$confirm(`确定移除 ${file.name}？`);
      },
      onChange(file, fileList) {
        this.fileList = fileList;
        trace("onChange", file, fileList, this.fileList);
      },

      checkModel() {
        //检查是否是新增模式
        var query = this.$route.query;
        let id = query.id;
        if (id) {
          let word = this.words.find(item => {
            return item.id == id;
          })
          if (word) {
            this.isNewWord = false;
            this.id = id;
            this.form.kinds = word.kinds;
            this.word = word;
          } else {
            this.isNewWord = true;
            this.form.kinds = [];
          }
        }else {
          this.isNewWord = true;
          this.form.kinds = [];
        }

      },
    },
    created() {
    },
    mounted() {

      this.checkModel();
    }
  };
</script>
<style lang="scss" scoped>
  .word-add-top-box {
    .card-body {
      .top-title-box {
        margin-right: 10px;
      }
    }
  }

  ::v-deep .header-cell-class-name {
    background: #ecf0f3;
  }

  .word-add-bottom-box {
    margin-top: 30px;

    .table-top-box {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .top-left-box {
        .el-select {
          width: 120px;
          margin: 0 5px;
        }

        .el-input {
          width: 180px;
          margin: 0 5px;
        }
      }
    }

    .table-bottom-box {
      margin: 20px 5px;
    }

    .card-body {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 750px;
    }
  }
</style>
